<el-menu
        default-active="12-14"
        class="el-menu-vertical-demo"
        :class="sideBarClass"
        @select="handleSelect"
        @open="handleOpen"
        @close="handleClose"
        background-color="#20222A"
        text-color="#fff"
        :collapse-transition="collapseTransition"
        :collapse="isCollapse"
        active-text-color="#ffd04b">
    {% for item in menu %}
        <el-submenu index="{{ item.id }}">
            {% if item.link == "root" %}
                <template slot="title"><icon class="{{ item.pic }} pad5 c12"></icon><span>{{ item.name }}</span></template>
                {% for itemSon in item.sons %}
                    {% if itemSon.link == "root" %}
                        <el-submenu index="{{ item.id }}-{{ itemSon.id }}">
                            <template slot="title"><span class="{{ itemSon.pic }} pad5"></span>{{ itemSon.name }}</template>
                            {% for itemSonSon in itemSon.sons %}
                                <a href="{{ itemSonSon.link }}" target="mainframe"><el-menu-item index="{{ item.id }}-{{ itemSon.id }}-{{ itemSonSon.id }}"><span class="{{ itemSonSon.pic }} pad5"></span><span>{{ itemSonSon.name }}</span></el-menu-item></a>
                            {% endfor %}
                        </el-submenu>
                    {% else %}
                        <a href="{{ itemSon.link }}" target="mainframe"><el-menu-item index="{{ item.id }}-{{ itemSon.id }}"><span class="{{ itemSon.pic }} pad5"></span><span>{{ itemSon.name }}</span></el-menu-item></a>
                    {% endif %}
                {% endfor %}
            {% else %}
                <a href="{{ item.link }}" target="mainframe"><el-menu-item index="{{ item.id }}-0"><span class="{{ item.pic }} pad5"></span><span>{{ item.name }}</span></el-menu-item></a>
            {% endif %}
        </el-submenu>
    {% endfor %}
</el-menu>
